<template>
  <view class="container">
    <view class="strategy-box">
      <view v-if="title">{{ title }}</view>
      <view class="st-box" style="margin-top: 24rpx;">
        <view
          class="st-title-box"
          v-for="(item, index) in list"
          :key="index"
          @click.stop="gotoUrl(list, item)"
        >
          <view class="st-title-text">
            {{ item.itineraryTitle }} 
          </view>
          <!-- <uni-icons type="forward" color="#767697" size="14"></uni-icons> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    titleList: {
      type: Array,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    titleList: {
      // handler (newName, oldName) {
      //     console.log(newName)
      // },
      // immediate: true,
      deep: true,
      immediate: true,
      handler: function (newValue, oldValue) {
        console.log(newValue, oldValue, "999999999999------");
        if (newValue !== oldValue) {
          let that = this;
          setTimeout(function () {
            that.printedText(0);
          }, 1000);
        }
      },
    },
  },
  methods: {
    printedText(index) {
      if (this.titleList.length > 0) {
        this.list.push(this.titleList[index]);
        if (this.list.length < this.titleList.length) {
          setTimeout(() => {
            this.printedText(index + 1);
            this.$emit("scrollToBottom");
          }, 500);
        }
      }
    },
    gotoUrl(list, item) {
      console.log("点击了",item.itineraryId);
      this.$emit("postM", item.itineraryId);
    },
  },
  mounted() {
    console.log("加载完成", this.titleList);
    // let that = this
    // setTimeout(function (){
    //   that.printedText(0)
    // },500)
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  padding: 0 26rpx 14rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4d566a;
  line-height: 35rpx;
  display: flex;
  .strategy-box{
    color: $sl-color-grey;
  }
  .st-box{
    display: flex;
    flex-direction: column;
  }
  .st-title-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    align-items: center;
    .logo-icon {
      margin-bottom: 4rpx;
    }
    .st-title-text {
      margin-right: 5rpx;
      font-size: 28rpx;
      font-weight: normal;
      color: $sl-color-blue;
      display: inline;
    }
  }
}
</style>
